<template>
	<div class="right">
		<div class="box_module">
			<!-- 模块名字 -->
			<p class="moduleTitle">
				技术社区
			</p>
			<div class="moduleLink">
				<!-- 工具连接 -->
				<a :href="shequ.src" target="_blank" v-for="shequ in community" :key="shequ.id" :title="shequ.desc">
					<div class="toolShow">
						<!-- 工具图标 -->
						<img :src="shequ.img" class="toolIcon" >
						<!-- 工具名称 -->
						<div class="toolName">{{shequ.name}}</div>
						<!-- 描述 -->
						<p class="toolDesc">{{shequ.desc}}</p>
					</div>
				</a>
			</div>
		</div>
		<div class="box_module">
			<!-- 模块名字 -->
			<p class="moduleTitle">
				官方文档
			</p>
			<div class="moduleLink">
				<!-- 工具连接 -->
				<a :href="study.src" target="_blank" v-for="study in dosc" :key="study.id" :title="study.title">
					<div class="toolShow">
						<!-- 工具图标 -->
						<img :src="study.img" class="toolIcon" >
						<!-- 工具名称 -->
						<div class="toolName">{{study.name}}</div>
						<!-- 描述 -->
						<p class="toolDesc">{{study.desc}}</p>
					</div>
				</a>
			</div>
		</div>
		<div class="box_module">
			<div style="float: left;">
				<p class="moduleTitle">
					代码托管
				</p>
				<div class="moduleLink">
					<a :href="code.src" target="_blank" v-for="code in CodeManage" :key="code.id" :title="code.title">
						<div class="toolShow">
							<img :src="code.img" class="toolIcon" >
							<div class="toolName">{{code.name}}</div>
							<p class="toolDesc">{{code.desc}}</p>
						</div>
					</a>
				</div>
			</div>
			<div  style="float: left;">
				<p class="moduleTitle">
					云计算服务
				</p>
				<div class="moduleLink">
					<a :href="code.src" target="_blank" v-for="code in yun" :key="code.id" :title="code.title">
						<div class="toolShow">
							<img :src="code.img" class="toolIcon" >
							<div class="toolName">{{code.name}}</div>
							<p class="toolDesc">{{code.desc}}</p>
						</div>
					</a>
				</div>
			</div>

		</div>
		<div class="box_module">
			<!-- 模块名字 -->
			<p class="moduleTitle">
				学习平台
			</p>
			<div class="moduleLink">
				<!-- 工具连接 -->
				<a :href="study.src" target="_blank" v-for="study in learn" :key="study.id" :title="study.title">
					<div class="toolShow">
						<!-- 工具图标 -->
						<img :src="study.img" class="toolIcon" >
						<!-- 工具名称 -->
						<div class="toolName">{{study.name}}</div>
						<!-- 描述 -->
						<p class="toolDesc">{{study.desc}}</p>
					</div>
				</a>
			</div>
		</div>
		<div class="box_module">
			<!-- 模块名字 -->
			<p class="moduleTitle">
				协作办公
			</p>
			<div class="moduleLink">
				<!-- 工具连接 -->
				<a :href="off.src" target="_blank" v-for="off in office" :key="off.id" :title="off.title">
					<div class="toolShow">
						<!-- 工具图标 -->
						<img :src="off.img" class="toolIcon" >
						<!-- 工具名称 -->
						<div class="toolName">{{off.name}}</div>
						<!-- 描述 -->
						<p class="toolDesc">{{off.desc}}</p>
					</div>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	// 技术社区
	let community = [
		{
			id:"1",
			src:"https://juejin.cn/",
			img:require("../assets/images/community/juejin.png"),
			name:"掘金",
			desc:"代码不止，掘金不停",
		},
		{

			id:"2",
			src:"https://www.csdn.net/",
			img:require("../assets/images/community/csdn.png"),
			name:"CSDN",
			desc:"全球知名中文IT技术交流平台",
		},
		{

			id:"3",
			src:"https://www.cnblogs.com/",
			img:require("../assets/images/community/cnblogs.png"),
			name:"博客园",
			desc:"代码不止，掘金不停",
		},
		{

			id:"4",
			src:"https://leetcode-cn.com/",
			img:require("../assets/images/community/LeetCode.png"),
			name:"力扣(LeetCode)",
			desc:"全球知名中文IT技术交流平台",
		},
		{

			id:"5",
			src:"https://stackoverflow.com/",
			img:require("../assets/images/community/stack.png"),
			name:"stackoverflow",
			desc:"全球最大的技术问答社区",
		},
		{

			id:"6",
			src:"https://developer.aliyun.com/",
			img:require("../assets/images/community/aliyun.png"),
			name:"阿里云开发者社区",
			desc:"集合阿里经济体各个单元技术优势",
		},
		{

			id:"7",
			src:"https://bbs.huaweicloud.com/",
			img:require("../assets/images/community/huaweicloud.jpg"),
			name:"华为云社区",
			desc:"华为云官方技术交流社区",
		},
		{
			id:"8",
			src:"https://www.51cto.com/",
			img:require("../assets/images/community/51cto.png"),
			name:"51CTO",
			desc:"中国领先的IT技术网站",
		},
		{
			id:"9",
			src:"https://tech.meituan.com/",
			img:require("../assets/images/community/meituan.png"),
			name:"美团技术团队",
			desc:"美团技术技术分享平台",
		},
		{
			id:"10",
			src:"https://gitbook.cn/",
			img:require("../assets/images/community/gitbook.png"),
			name:"GitChat",
			desc:"基于微信平台的知识分享平台",
		},
		{
			id:"10",
			src:"https://www.oschina.net/",
			img:require("../assets/images/community/oschina.png"),
			name:"OSCHINA",
			desc:"目前领先的中文开源技术社区",
		},
	]
	// 代码托管
	let CodeManage = [
		{
			id:"1",
			src:"https://gitee.com/",
			img:require("../assets/images/code/gitee.png"),
			name:"Gitee",
			title:"基于Git的代码托管和协作开发平台,提供中国本土化的代码托管服务",
			desc:"国内基于Git的代码托管和协作开发平台",
		},
		{
			id:"2",
			src:"https://github.com/",
			img:require("../assets/images/code/github.jpg"),
			name:"Github",
			title:"基于Git的代码托管和协作开发平台,提供中国本土化的代码托管服务",
			desc:"面向开源及私有软件项目的托管平台",
		},
		{
			id:"3",
			src:"https://about.gitlab.com/",
			img:require("../assets/images/code/gitlab.png"),
			name:"GitLab",
			title:"使用Git作为代码管理工具,并在此基础上搭建起来的Web服务",
			desc:"用于仓库管理系统的开源项目",
		}
	]
	let yun = [
		{
			id:"1",
			src:"https://www.aliyun.com/",
			img:require("../assets/images/community/aliyun.png"),
			name:"阿里云",
			desc:"上云就上阿里云",
		},
		{
			id:"2",
			src:"https://www.huaweicloud.com/",
			img:require("../assets/images/community/huaweicloud.jpg"),
			name:"华为云",
			desc:"共建智能世界云底座",
		},
		{
			id:"3",
			src:"https://cloud.tencent.com//",
			img:require("../assets/images/yun/txyun.png"),
			name:"腾讯云",
			desc:"产业智变 云启未来",
		},
		{
			id:"4",
			src:"https://cloud.baidu.com/",
			img:require("../assets/images/yun/bdyun.jpg"),
			name:"百度智能云",
			desc:"智能时代基础设施",
		},
	]

	// Java
	// 前端
	// UI框架
	// 学习平台
	let learn = [
		{
			id:"1",
			src:"https://www.runoob.com/",
			img:require("../assets/images/learn/cainiao.jpg"),
			name:"菜鸟教程",
			title:"介绍了各种编程语言的基础知识",
			desc:"提供了编程的基础技术教程",
		},
		{
			id:"2",
			src:"https://www.w3school.com.cn/",
			img:require("../assets/images/learn/w3c.png"),
			name:"W3School",
			title:"从基础的HTML到 CSS,乃至进阶的XML、SQL、JS、PHP和ASP.NET",
			desc:"可以找到所有的网站建设教程",
		},
		{
			id:"3",
			src:"https://www.bilibili.com/",
			img:require("../assets/images/learn/bili.png"),
			name:"哔哩哔哩",
			title:"你所热爱的，就是生活",
			desc:"海量的学习资源任君挑选",
		},
		{
			id:"4",
			src:"https://www.imooc.com/",
			img:require("../assets/images/learn/imooc.jpg"),
			name:"慕课网",
			desc:"IT技能学习平台,涉及60类主流技术语言",
		},
		{
			id:"5",
			src:"https://www.xuetangx.com/",
			img:require("../assets/images/learn/xuetang.png"),
			name:"学堂在线",
			desc:"精品在线课程学习平台",
		},
		{
			id:"6",
			src:"https://www.kaikeba.com/",
			img:require("../assets/images/learn/kai.png"),
			name:"开课吧",
			desc:"在线职业教育",
		},
		{
			id:"7",
			src:"https://www.icourse163.org/",
			img:require("../assets/images/learn/mooc.png"),
			name:"中国大学MOOC",
			desc:"国家精品课程在线学习平台",
		},
		{
			id:"8",
			src:"https://study.163.com/",
			img:require("../assets/images/learn/wyy.png"),
			name:"网易云课堂",
			desc:"国家精品课程在线学习平台",
		},
	]
	// 划水摸鱼
	// 办公软件
	let office = [
		{
			id:"1",
			src:"https://www.wps.cn/",
			img:require("../assets/images/office/wps.png"),
			name:"金山办公",
			title:"全新一代云Office办公软件,支持多人在线协同办公,实时协作",
			desc:"WPS Office，金山文档,在线编辑文档",
		},
		{
			id:"2",
			src:"https://www.kdocs.cn/",
			img:require("../assets/images/office/kdocs.jpg"),
			name:"金山文档",
			title:"数据安全隔离、实时同步，与他人共享文件夹/团队文件/企业文件",
			desc:"可多人实时协作编辑的在线文档",
		},
		{
			id:"3",
			src:"https://shimo.im/",
			img:require("../assets/images/office/shimo.jpg"),
			name:"石墨文档",
			title:"企业在线协同办公系统平台,支持云端多人在线协作编辑文档和表格",
			desc:"石墨由七个常用办公套件加上企业级云盘组成",
		},
		{
			id:"4",
			src:"https://modao.cc/brand",
			img:require("../assets/images/office/modao.png"),
			name:"墨刀",
			title:"产品设计一体化在线协同办公平台,集原型设计,线上版sketch设计师工具",
			desc:"线产品设计协作一体化平台",
		},
		{
			id:"5",
			src:"https://pan.baidu.com/",
			img:require("../assets/images/office/bdpan.jpg"),
			name:"百度网盘",
			title:"实现电脑、手机、电视等多种终端场景的覆盖和互联",
			desc:"支持多类型文件备份、分享、查看和处理",
		},
		{
			id:"6",
			src:"https://www.aliyundrive.com/",
			img:require("../assets/images/office/alipan.jpg"),
			name:"阿里云盘",
			title:"速度快、不打扰、够安全、易于分享的个人网盘",
			desc:"不限速,极速上传,超大文件快传",
		},
		{
			id:"7",
			src:"https://www.lanzou.com/",
			img:require("../assets/images/office/lanzou.jpg"),
			name:"蓝奏云",
			title:"蓝奏, 上传, 网盘, 网络硬盘, 云盘, 云存储, 网众蓝奏",
			desc:"下载清晰,不干扰用户,节省用户时间",
		},
		{
			id:"8",
			src:"https://www.feishu.cn/",
			img:require("../assets/images/office/feishu.png"),
			name:"飞书",
			title:"先进企业协作与管理平台",
			desc:"一站式无缝办公协作，团队上下对齐目标",
		},
		{
			id:"9",
			src:"https://note.youdao.com/",
			img:require("../assets/images/office/youdao.jpg"),
			name:"有道云笔记",
			title:"支持多端同步，用户可以随时随地对线上资料进行编辑、分享以及协同",
			desc:"网易旗下专注办公提效的笔记软件",
		},
    {
      id:"10",
      src:"https://lanhuapp.com/",
      img:"",
      name:"蓝湖",
      title:"无缝衔接产品、设计、研发流程,降低沟通成本，缩短开发周期，提高工作效率",
      desc:"高效的产品设计协作平台",
    },

	]
	// 图片设计
	// 电子书
	// 开发工具
	// Chrome插件
	// 官方中文文档
	let dosc = [
		{
			id:"1",
			src:"https://angular.cn/docs",
			img:require("../assets/images/dosc/angular.png"),
			name:"Angular中文文档",
			title:"用于创建高效、复杂、精致的单页面应用",
			desc:"帮助学习和使用Angular框架与开发平台",
		},
		{
			id:"2",
			src:"https://getbootstrap.com/",
			img:"https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo-shadow.png",
			name:"Bootstrap",
			title:"简洁、直观、强悍的前端开发框架，让web开发更迅速、简单",
			desc:"简洁、直观、强悍的前端开发框架",
		},
		{
			id:"3",
			src:"https://www.babeljs.cn/",
			img:require("../assets/images/dosc/babel.png"),
			name:"Babel中文网",
			title:"今天就开始使用下一代的 JavaScript 语法编程吧！",
			desc:"Babel 是一个 JavaScript 编译器",
		},
		{
			id:"4",
			src:"https://echarts.apache.org/zh/index.html",
			img:require("../assets/images/dosc/echarts.png"),
			name:"ECharts",
			title:"可高度个性化定制的数据可视化图表",
			desc:"基于 JavaScript 的开源可视化图表库",
		},
		{
			id:"5",
			src:"https://v2.cn.vuejs.org/",
			img:require("../assets/images/dosc/vue3.png"),
			name:"Vue.js",
			title:"用于构建用户界面的渐进式框架",
			desc:"渐进式JavaScript 框架",
		},
		{
			id:"6",
      src:"https://v3.cn.vuejs.org/",
      img:require("../assets/images/dosc/vue3.png"),
      name:"Vue3",
      title:"用于构建用户界面的渐进式框架",
      desc:"用于构建用户界面的渐进式框架",
		},
		{
			id:"7",
			src:"https://cn.vitejs.dev/",
			img:"https://cn.vitejs.dev/logo.svg",
			name:"Vite",
			title:"下一代的前端工具链",
			desc:"下一代的前端工具链,为开发提供极速响应",
		},

		{
			id:"8",
			src:"https://element-plus.org",
			img:require("../assets/images/dosc/elplus.png"),
			name:"Element Plus",
			title:"基于Vue 3,面向设计师和开发者的组件库",
			desc:"基于Vue 3,面向设计师和开发者的组件库",
		},
		{
			id:"9",
			src:"https://flutter.cn/",
			img:require("../assets/images/dosc/flu2.png"),
			name:"Flutter中文网站",
			title:"Flutter 是 Google 开源的应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用",
			desc:"为所有屏幕构建精美应用",
		},
		{
			id:"10",
			src:"https://flutterchina.club/docs/",
			img:require("../assets/images/dosc/flu2.png"),
			name:"Flutter中文网",
			title:"Flutter 是 Google 开源的应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用",
			desc:"为所有屏幕构建精美应用",
		},
		{
			id:"11",
			src:"https://www.tslang.cn/index.html",
			img:require("../assets/images/dosc/ts.png"),
			name:"TypeScript中文网",
			title:"TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript",
			desc:"可以编译出纯净、简洁的JavaScript代码",
		},
		{
			id:"12",
			src:"https://zh-hans.reactjs.org/",
			img:require("../assets/images/dosc/react.png"),
			name:"React中文文档",
			title:"React 使创建交互式 UI 变得轻而易举",
			desc:"用于构建用户界面的 JavaScript 库",
		},
    {
      id:"13",
      src:"https://ant.design/index-cn",
      img:"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
      name:"Ant Design",
      title:"企业级产品设计体系，创造高效愉悦的工作体验",
      desc:"Ant Design - 一套企业级 UI 设计语言和 React 组件库",
    },{
      id:"14",
      src:"https://cn.redux.js.org/",
      img:"https://cn.redux.js.org/img/redux.svg",
      name:"Redux 中文官网",
      title:"JS 应用的状态容器，提供可预测的状态管理",
      desc:"JavaScript 应用的状态容器，提供可预测的状态管理",
    },
		{
			id:"15",
			src:"https://developers.weixin.qq.com/miniprogram/dev/framework/",
			img:require("../assets/images/dosc/wx.png"),
			name:"微信小程序",
			title:"小程序提供了一个简单、高效的应用开发框架和丰富的组件及API",
			desc:"介绍小程序的开发语言、框架、能力、调试等内容",
		},
		{
			id:"16",
			src:"https://uniapp.dcloud.io/tutorial/",
			img:require("../assets/images/dosc/uniapp.png"),
			name:"uni-app",
			title:"一套代码编到14个平台，这不是梦想",
			desc:"使用Vue.js开发所有前端应用的框架",
		},
		{
			id:"17",
			src:"https://nodejs.org/zh-cn/docs/",
			img:require("../assets/images/dosc/node.jpg"),
			name:"Node.js",
			title:"基于Chrome V8引擎的JavaScript运行时环境。",
			desc:"用来构建可扩展的网络应用",
		},
		{
			id:"18",
			src:"https://www.sveltejs.cn/",
			img:require("../assets/images/dosc/svelte.png"),
			name:"Svelte 中文文档",
			title:"构建 web 应用程序的工具",
			desc:"全新的构建用户界面的方法",
		},
		{
			id:"19",
			src:"https://webpack.docschina.org/concepts/",
			img:require("../assets/images/dosc/webpack.png"),
			name:"webpack中文文档",
			title:" 静态模块打包工具",
			desc:"用于现代 JavaScript 应用程序的 静态模块打包工具",
		},



	]

	export default{
	    name:"RightModule",
	    data(){
	        return {
	            community,
				CodeManage,
				learn,
				office,
				dosc,
				yun
	        }
	    },
	}
</script>

<style scoped>
	/* 右边模块 */
	.right{
		position: relative;
		width: 940px;
		float: right;
		margin-right: 8px;
	}
	.box_module{
		float: right;
		position: relative;
		width: 890px;
		border-radius: 4px;
		padding: 18px 0px 18px 20px;
		margin-bottom: 25px;
		box-shadow:5px 5px 10px #bdbdbd;
	}
	.moduleTitle{
		width: 100%;
		height: 30px;
		line-height: 30px;
		color: #000000;
		font-weight: 600;
		font-size: 19px;
		text-align: left;
		margin-bottom: 18px;
	}
	.toolShow{
		float: left;
		position: relative;
		background-color: #f7f7f7;
		border-radius: 5px;
		margin-right: 14px;
		margin-bottom: 18px;
		padding: 9px 5px 0 8px;
	}
	.toolIcon{
		float: left;
		width: 26px;
		height: 26px;
		margin-right: 6px;
		border-radius: 5px;
	}
	.toolName{
		color: #000000;
		font-size: 15px;
		font-weight: bold;
		width: 195px;
		height: 30px;
		line-height: 30px;
	}
	.toolDesc{
		width: 190px;
		height: 33px;
		color: #6a6a6a;
		font-size: 8px;
		margin-top: 9px;
		margin-bottom: 5px;
	}
</style>
